<template>
	<div class="hotcont">
		<div class="m-sglst" v-for="(item,index) in ttopList.tracks" v-if="index<58">
			<div class="m-sgitem">
				<div class="sgfl">{{index+1}}</div>
				<div class="sgfr f-bd f-bd-btm">
					<div class="sgchfl">
						<div class="f-thide sgtl">
							{{item.name}}
							<span class="sgalia">{{item.alia[0]}}</span>
						</div>
						<div class="f-thide sginfo">
							{{item.ar[0].name}}-{{item.name}}
						</div>
					</div>
					<div class="sgchfr"><span class="u-hmsprt sgchply"></span></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			ttopList:[Object,String]
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html {
		font-size: $fs;
	}
	
	@function r($px) {
		@return $px/$fs*1rem;
	}
	.hotcont {
		position: relative;
		width: 100%;
		overflow: hidden;
		.m-sgitem {
			display: flex;
			padding-left: r(20px);
			cursor: pointer;
			align-items: center;
			.sgfl-cred {
				color: #df3436;
			}
			.sgfl {
				width: r(56px);
				font-size: r(34px);
				color: #999;
			}
			.sgfl-cred {
				color: #df3436;
			}
			.sgfr {
				border-bottom: r(2px) solid rgba(0, 0, 0, .1);
				flex: 1 1 auto;
				display: flex;
				position: relative;
				.sgchfl {
					padding: r(17px) 0;
					width: 0;
					flex: 1 1 auto;
					.f-thide {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						word-break: normal;
					}
					.sgtl {
						font-size: r(34px);
						.sgalia {
							color: #888;
							margin-left: r(8px);
						}
					}
					.sginfo {
						font-size: r(24px);
						color: #888;
						.sghot {
							display: inline-block;
							width: r(24px);
							height: r(16px);
							margin-right: r(8px);
						}
						.u-hmsprt {
							background: url(https://s3.music.126.net/m/s/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880) no-repeat;
							background-size: r(332px) r(194px);
						}
					}
				}
				.sgchfr {
					display: flex;
					align-items: center;
					padding: 0 r(20px);
					.sgchply {
						display: inline-block;
						width: r(44px);
						height: r(44px);
					}
					.u-hmsprt {
						background: url(https://s3.music.126.net/m/s/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880) no-repeat;
						background-size: r(332px) r(194px);
						background-position: r(-48px) 0;
					}
				}
			}
		}
	}
</style>